<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向数据绑定</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
    v-model  实现数据的双向数据绑定
       data中的数据 可以影响页面中的值   页面中值的改变也会影响data中的数据

       mvvm 设计思想

       m  model 数据     vm 监视器     v  views  视图
-->

<div id="app">
    <h2>欢迎登录</h2>
    <form action="">
        <p><input type="text" name="username" id="username" v-model="username"></p>
        <p><input type="text" name="password" id="password" v-model="password"></p>
        <p><input type="button" id="btn"  @click="submit" value="立即登录"></p>
    </form>
</div>


<script>

    // document.getElementById("btn").onclick = function () {
    //     let username = document.getElementById("username").value;
    //     let password = document.getElementById("password").value;
    //     console.log("发送ajax请求，参数: username="+username+"&password="+password)
    // }

    const vm = new Vue({
        el:'#app',
        data:{
            username:'tom',
            password:'88888'
        },
        methods:{
            submit(){
                console.log("发送ajax请求，参数: username="+this.username+"&password="+this.password)
            }
        }
    })

</script>

</body>
</html>
